<template>
    <div id="footer">
        <input type="checkbox" v-model="checkedAll">
        <span>{{ numberSelect }}</span>
        <span>{{ datas.length }}</span>
        <span @click="delAll">清除已完成任务</span>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const props = defineProps(['datas'])
const emit = defineEmits(['delSelect'])
// 已完成的待办数量
const numberSelect = computed(() => {
    return props.datas.filter((data) => data.ischecked).length
})
// 全选
const checkedAll = computed({
    get(){
        return props.datas.every((data) => data.ischecked)
    },
    set(status) {
        props.datas.forEach((data) => {
            data.ischecked = status
        })
    }
})
const delAll = () => {
    let newDatas = props.datas.filter((data) => !data.ischecked)
    emit('delSelect', newDatas)
}
</script>
